<template>
    <div class="visitorpie1">
        <div id="visitorpie1" class="" style="width: 100%;height:240px;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts/lib/echarts';
    // 引入柱状图
    import 'echarts/lib/chart/pie';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
    
    export default {
        mounted(){
            this.myChart = echarts.init(document.getElementById('visitorpie1'));
            this.initData();
        },
        props: ['piedata'],
        methods: {
            initData(){
				// const colors = ['#4B0082', '#B8860B', '#d14a61','#5793f3', '#675bba', '#292929','#FFD700', '#FF0000', '#FF8C00', '#006400', '#A0522D', '#008080' ,'#0000CD' ,'#800000'];
                const option = {
					 // color: colors,
                    // title : {
                    //     text: '用户分布',
                    //     subtext: '',
                    //     x:'center'
                    // },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
      //               legend: {
      //                   orient: 'vertical',
      //                   left: 'left',
						// top:'10',
      //                   data: ['pnl_profit','pnl_ret','pnl_amount',]
      //               },
                    series :this.piedata ,
                };
				this.myChart.clear();
                this.myChart.setOption(option);
            }
        },
        watch: {
            piedata: function (){
                this.initData()
            },
        }
    }
</script>

<style >
    .visitorpie{
        display: flex;
        justify-content: center;
        margin-top: 0px;
    }
</style>
